<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container{
				width: 600px;
				height: 400px;
				border:1px solid lightgray;
				margin:0 auto;
			}
			#menu{
				visibility: hidden;
				position: absolute;
				background-color:lightgray;
				border:1px solid darkgray;
			}
			#menu .menu_item{
				padding:5px;
				cursor: pointer;	
			}
			#menu .menu_item:hover{
				color:red;
			}
		</style>
	</head>
	<body>
		<div id="container" oncontextmenu="showMenu()">
			
		</div>
		<div id="menu">
			<div class="menu_item">菜单项1</div>
			<div class="menu_item">菜单项2</div>
			<div class="menu_item">菜单项3</div>
			<div class="menu_item">菜单项4</div>
		</div>
		<script>
			var container = document.getElementById("container");
			var menu = document.getElementById("menu");
			document.onclick = hideMenu;
			
			menu.addEventListener("click", function(){
					alert(window.event.target.innerHTML);
				});
			
			function showMenu(){
				var x = window.event.clientX;
				var y = window.event.clientY;
				menu.style.left = window.event.clientX + document.body.scrollLeft + "px";
				menu.style.top = window.event.clientY + document.body.scrollTop + "px";
				menu.style.visibility = "visible";
				
				window.event.preventDefault();
			}
			function hideMenu(){
				menu.style.visibility = "hidden";
			}
			
			document.oncontextmenu = function(){
				return false;
			}
		</script>
	</body>
</html>
